<template>
  <div class="info-main">
    <template v-if="childType === 'dns'">
      <YuncheDns :field="fieldData"></YuncheDns>
    </template>

    <template v-if="childType === 'mail'">
      <YuncheEmail :field="fieldData"></YuncheEmail>
    </template>

    <template v-if="childType === 'ftp'">
      <YuncheFtp :field="fieldData"></YuncheFtp>
    </template>

    <template v-if="childType === 'http'">
      <YuncheHttp :field="fieldData"></YuncheHttp>
    </template>

    <template v-if="childType === 'smb'">
      <YuncheSmb :field="fieldData"></YuncheSmb>
    </template>

    <template v-if="childType === 'sql'">
      <YuncheSql :field="fieldData"></YuncheSql>
    </template>

    <div style="display:none">
      <span style="color:red;font-weight:700"> {{ fieldData.kafkakey }} </span>
      <button @click="changeType('yunche_http')">yunche_http</button>
      <button @click="changeType('yunche_dns')">yunche_dns</button>
      <button @click="changeType('yunche_sql')">yunche_sql</button>
      <button @click="changeType('yunche_ftp')">yunche_ftp</button>
      <button @click="changeType('yunche_smb')">yunche_smb</button>
      <button @click="changeType('yunche_mail')">yunche_mail</button>
    </div>
  </div>
</template>

<script>
import YuncheDns from './components/yuncheDns.vue';
import YuncheEmail from './components/yuncheEmail.vue';
import YuncheFtp from './components/yuncheFtp.vue';
import YuncheHttp from './components/yuncheHttp.vue';
import YuncheSmb from './components/yuncheSmb.vue';
import YuncheSql from './components/yuncheSql.vue';

const fieldStorageKey = 'store_field';

export default {
  name: 'basicInfo',
  components: {
    YuncheDns,
    YuncheEmail,
    YuncheFtp,
    YuncheHttp,
    YuncheSmb,
    YuncheSql,
  },

  data() {
    return {
      fieldData: {},
    };
  },
  created() {
    const storedData = localStorage.getItem(fieldStorageKey);

    if (storedData) {
      this.fieldData = JSON.parse(storedData);
    }
  },

  computed: {
    childType() {
      if (this.fieldData && this.fieldData.kafkakey) {
        switch (this.fieldData.kafkakey) {
          case 'yunche_http':
            return 'http';

          case 'yunche_dns':
            return 'dns';

          case 'yunche_sql':
            return 'sql';

          case 'yunche_ftp':
            return 'ftp';

          case 'yunche_smb':
            return 'smb';

          case 'yunche_mail':
            return 'mail';

          default:
            return '';
        }
      }
      return '';
    },
  },

  methods: {
    changeType(type) {
      this.fieldData.kafkakey = type;
    },
  },

  // beforeRouteEnter(to, from) {
  //   console.log(from);
  // },
};
</script>

<style scoped>
.info-main {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  overflow: scroll;
}
</style>
